Using site
root-relative paths with Fireworks Pop-up Menus in Dreamweaver Library
files
Product:
Fireworks
Platform:
All
Versions:
4.0
ID:
15899
You can use
Fireworks Pop-up Menus in Dreamweaver Library files in either of two ways.
The first method, described in Fireworks
Pop-up Menus in Dreamweaver Library files (TechNote 15101), relies on
document-relative paths. The second method (described in this TechNote)
relies on site root-relative paths. The benefit of using site root
relative paths is that the template containing Pop-up Menus can be applied
to any page in the site.
Necessary
background information The method outlined in
this TechNote assumes that you are already familiar with some of the
basics in Dreamweaver and Fireworks, specifically including these
areas:
Note: There are issues
about previewing a page using root-relative links. Generally, you
will need to upload pages to a server to test the links. See the
Linking and Navigation chapter in Using Dreamweaver for more
information about previewing pages with root-relative links.
Creating
Pop-up menus For more
information on how to create a Pop-up Menu in Fireworks 4, choose
Help > Lessons and review Lesson 5 in the Fireworks 4 Tutorials.
Step-by-step instructions The tutorial-style instructions
below will walk you through the process of incorporating Pop-up Menus into
a Library file using site root-relative paths. The instructions will use
specific folder and file names for the sake of clarity and organization.
You can use your own folder and/or file names if you prefer.
This tutorial
also assumes that your local site root folder exactly mirrors the Web site
on your server (in other words, that the root folder on your hard drive is
the same as the root folder for your Web site). If your local site doesn't
exactly map to the server's Web site, these instructions may still be
helpful to you but you will have to make sure that all the site
root-relative paths you create or change accurately refer back to the root
folder of your Web site.
In Dreamweaver:
define the site
1
Define
your site in Dreamweaver.
Open the Site
window to view your site's files.
2
Create a
folder at the root level namedfwnavbar.
3
Inside the fwnavbar
folder, create a subfolder named
fwnavbarimages.
In Fireworks:
create the Pop-up Menu files with root-relative links
1
Create a
Fireworks file that contains Pop-up Menus. While you are creating
the Pop-up Menus in the Set Pop-up Menu dialog box, use site
root-relative paths for the URLs in the Link text boxes for all
paths that point to files located within your site. (Example 1 shows site root-relative links in
the first section of the Pop-up Menu Creator.)
2
Complete the
Fireworks file and optimize it for export using the Optimize panel.
3
Save your PNG
file into the fwnavbar folder in your defined site.
4
After you have
completed the design of your Fireworks file containing the Pop-up
Menus, you will need to export the HTML file, images, and JavaScript
file into your defined site. Choose File > Export to open the Export
dialog box.
5
Browse to find
and open the fwnavbar folder in your defined site.
6
Name your file
fwnavbar.htm.
7
In the Save as
type pop-up menu, select HTML and Images.
8
In the HTML
pop-up menu, select Export HTML file.
9
If your file has
slices or hotspots, select Export Slices in the Slices pop-up
menu.
10
Select
the Put Images in Subfolder option.
11
Click Browse.
This opens the Select Folder dialog box (called Choose a Folder for
Macintosh).
12
Navigate
to find and select the fwnavbarimages
folder.
13
Click Open
(called Choose for Macintosh).
14
In the Export
dialog box, click Options. This opens the HTML Setup dialog
box.
15
On the General
tab, select Dreamweaver in the HTML Style pop-up menu.
16
Click OK. Your
Export dialog box should match the one displayed in Example 2.
17
Click Save.
The
HTML file named fwnavbar.htm and the
JavaScript file (fw_menu.js) will be
saved in the fwnavbar folder. The images
will be exported to the fwnavbarimages
folder.
In Dreamweaver:
incorporate the Pop-up Menus into a library file
Changing paths
in the Fireworks HTML file to site root-relative
1
In
Dreamweaver, open fwnavbar.htm.
2
Choose View >
Code to access the HTML source code in the fwnavbar.htm file.
3
Change
the reference to the Pop-up Menu JavaScript file to a site
root-relative path. The code below will be found right before the
closing </head>
tag.
To: <script
language="JavaScript1.2" src="/fwnavbar/fw_menu.js"></script>
4
Next,
you will need to change all of the paths to the images used in your
Pop-up Menus from document-relative to site root-relative. A quick
way to do this is by using the Find and Replace feature (choosing
Edit > Find and Replace).
5
In the Find In
pop-upmenu, select Current Document.
6
In the Search For
pop-up menu, select Source Code.
7
In the
text box to the right of the Search For pop-up menu, type the
following:
fwnavbarimages
8
In the
Replace With text box, type the following:
/fwnavbar/fwnavbarimages
9
Your Find and
Replace dialog box should match the one displayed in Example 3. Click Replace All. After
Dreamweaver has replaced the code, click OK. Then close the Find and
Replace dialog box.
10
Save the
file and close it.
11
In Dreamweaver,
create a folder named Library at the root level of your defined
site, if one is not already present.
Creating the
Library file
12
Choose File >
New to create a new Dreamweaver document.
13
Choose
File > Save. In the Save As dialog box, navigate to find and
select the Library folder in your defined site.
14
Name the library
file. In the Save as Type pop-up menu, select Library Files
(*.lbi).
15
Click
Save to save this Library item.
16
While this new
library file is still open, switch the focus of the window to Code
view (or choose Window > Code Inspector).
17
In Code view,
select and delete all of the source code.
In the Insert
Fireworks HTML dialog box, browse to find and select the fwnavbar.htm file in the fwnavbar folder. Click
Open, then click OK. This process will insert the Fireworks Pop-up
Menus into your Library item.
21
Save the
LBI file. Now you will be able to use the Library file in an HTML
file that is saved anywhere in your site.
Note: When you save an
LBI file, Dreamweaver will display a dialog box that asks if you
want to update any files that the Library file has been applied to
even though the Library object has not been added to any files. This
is normal behavior in Dreamweaver. Click Yes. Then close the Update
Pages dialog box.
Adding the
Library item to an HTML document
22
Create a
new HTML document and save it in any location within your
site.
23
Choose Window
> Library to view the Library panel and find the Pop-up Menu
Library item in the list. Click it in the Library panel to see the
preview at the top of the panel.
24
Drag the preview
of the Library object onto the document and release it in the
desired location.
Note: Pop-up Menu locations are absolute to
the top left corner of the page. Inserting a Library object into any
other location will result in the Pop-up Menus being displayed
improperly. You can edit the location of the Pop-up menus in the
Fireworks HTML file before inserting it into the Library file. For
more information on adjusting the location of Pop-up Menus in
Fireworks, see Changing the location of a Pop-up Menu exported from
Fireworks (TechNote 15001).
25
Complete the
design of your HTML page and then save the Dreamweaver HTML
file.
26
Upload the files
to the remote server.
Additional
information For additional
information about Pop-up Menus in Fireworks or Dreamweaver, consult the
following:
